<template>
  <VDialog
    @close="handleClose"
    @save="save"
    :loading="loading"
    title="更新渠道汇率"
  >
    <template #content>
      <div
        class="mb-[8px] flex text-[var(--other-color-3)] justify-between items-center"
      >
        <span>{{ getCurrentFormattedDate() }}</span>
        <span>币种: {{ currency }}</span>
      </div>
      <vxe-grid v-bind="gridOptions" ref="tableRef"></vxe-grid>
    </template>
  </VDialog>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { updateExchangeRate } from "../../../api.js";
import { getCurrentFormattedDate } from "@/utils/time.js";
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const props = defineProps({
  data: { type: Array, default: () => [] },
  currency: { type: String, default: "" },
});
const { data, currency } = toRefs(props);
const gridOptions = reactive({
  height: "400px",
  columnConfig: {
    resizable: true,
  },
  loading: false,
  size: "mini",
  columns: [
    { type: "seq", width: 80, title: "序号" },
    {
      title: "换汇渠道",
      field: "channelName",
    },
    {
      title: "汇率",
      field: "rate",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <el-input-number v-model={row.exchangeRate} controls={false} />
            </div>
          );
        },
        header: () => {
          return (
            <div class="flex items-center">
              <span class="mr-[4px]">汇率</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="设置对应币种兑换CNY的汇率"
                placement="top"
              >
                <el-icon>
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          );
        },
      },
    },
  ],
  data: [],
});
watch(
  () => data.value,
  (val) => {
    if (val.length < 1) return;
    gridOptions.data = val;
  },
  { immediate: true }
);
const save = async () => {
  try {
    const isEmptyExchangeRate = gridOptions.data?.some(
      (item) => item.exchangeRate === null || item.exchangeRate === undefined
    );
    if (isEmptyExchangeRate) {
      ElMessage.error("请填写完整的汇率");
      return;
    }
    if (!currency.value) {
      ElMessage.error("币种不能为空");
      return;
    }
    let data = gridOptions.data?.map((item) => {
      return {
        channelId: item.channelId,
        exchangeRate: item.exchangeRate,
        channelType: item.channelType.value,
      };
    });
    loading.value = true;
    const { code, message } = await updateExchangeRate({
      currency: currency.value,
      channels: data,
    });
    if (code != 200) {
      ElMessage.error(message);
      return;
    }
    ElMessage.success("更新成功");
    handleClose(true);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
const handleClose = async (refresh) => {
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
const loading = ref(false);
</script>
